CSS @property: Mestring av definisjon og validering av egendefinerte egenskaper

I det stadig utviklende landskapet av webutvikling, krever det å ligge i forkant at man tar i bruk nye teknologier og teknikker som forbedrer effektivitet, vedlikehold og den generelle brukeropplevelsen. Egendefinerte CSS-egenskaper, også kjent som CSS-variabler, har revolusjonert måten vi administrerer og kontrollerer stiler på. Med introduksjonen av @property at-regelen, får CSS et enda kraftigere verktøy: muligheten til å definere og validere disse egendefinerte egenskapene, noe som fører til mer robust og forutsigbar styling.

Hva er CSS @property?

@property at-regelen lar utviklere definere typen, syntaksen og andre karakteristikker for egendefinerte egenskaper. Tenk på det som en måte å gi struktur og validering for dine CSS-variabler. Før @property var CSS-variabler i hovedsak bare tekststrenger som kunne inneholde hva som helst. Denne mangelen på struktur kunne føre til feil, gjøre feilsøking mer utfordrende og hindre den generelle designkonsistensen. @property løser disse problemene ved å tilby en mekanisme for å kontrollere hvilke typer verdier som kan tildeles dine egendefinerte egenskaper.

Hvorfor bruke CSS @property? Fordeler og fortrinn

Fordelene med å bruke @property er mange og bidrar direkte til forbedret praksis innen webutvikling:

• Forbedret vedlikehold av kode: Ved å eksplisitt definere typene og oppførselen til egendefinerte egenskaper, gjør du koden din mer selvforklarende og lettere å forstå. Andre utviklere (eller ditt fremtidige jeg) vil raskt forstå hvordan en egendefinert egenskap er ment å bli brukt.
• Forbedret designkonsistens: Validering sikrer at kun gyldige verdier tildeles egendefinerte egenskaper. Dette bidrar til å opprettholde et konsistent visuelt utseende på nettstedet eller applikasjonen din.
• Robusthet og feilforebygging: Ugyldige verdier vil bli avvist, noe som forhindrer uventede stilproblemer og reduserer tiden brukt på feilsøking.
• Dynamisk styling: @property muliggjør bedre integrasjon med JavaScript, slik at du programmatisk kan kontrollere og oppdatere CSS-variablene dine med trygghet, vel vitende om at verdiene er gyldige.
• Bedre autofullføring og utvikleropplevelse: Kodeditorer kan gi mer intelligent autofullføring og kodehint, noe som hjelper utviklere med å skrive CSS raskere og mer nøyaktig.
• Optimalisert ytelse: Selv om ytelsespåvirkningen generelt er liten, kan validering noen ganger føre til mindre optimaliseringer av nettleseren.

Kjernekomponenter i @property-regelen

@property at-regelen består av flere nøkkelkomponenter som definerer hvordan en egendefinert egenskap oppfører seg.

--property-name

Dette er navnet på den egendefinerte egenskapen du definerer. Det må begynne med to bindestreker (--), som er standard for egendefinerte CSS-egenskaper.

            @property --my-color { ... }
            

              
                Copy
              
            
          

syntax

syntax-deskriptoren definerer den tillatte typen eller mønsteret for verdiene til den egendefinerte egenskapen. Den bruker en undergruppe av CSS-syntaksen og kan ha ulike verdier, inkludert:

• <color>: Representerer en fargeverdi (f.eks. red, #FF0000, rgba(255, 0, 0, 1)).
• <length>: Representerer en lengdeverdi (f.eks. 10px, 5em, 20%).
• <number>: Representerer en numerisk verdi (f.eks. 10, 3.14).
• <percentage>: Representerer en prosentverdi (f.eks. 50%).
• <url>: Representerer en URL (f.eks. url('image.jpg')).
• <integer>: Representerer en heltallsverdi (f.eks. 10, -5).
• <angle>: Representerer en vinkelverdi (f.eks. 45deg, 0.5turn).
• <time>: Representerer en tidsverdi (f.eks. 2s, 200ms).
• <string>: Representerer en strengverdi.
• <image>: Representerer en bildeverdi (samme som url).
• *: Godtar enhver gyldig CSS-verdi. Dette er en veldig tillatende tilnærming og bør brukes med forsiktighet.
• Kombinerte typer: Du kan kombinere flere typer ved hjelp av mellomromseparerte lister (f.eks. <length> <length> <length> for å definere tre lengdeverdier) eller bruke '|'-symbolet for å tillate en av de listede typene (f.eks. <length> | <percentage> for å støtte enten en lengde eller en prosentandel).
• Egendefinerte syntakser: Egendefinerte syntakser, for mer komplekse scenarier, støttes ofte av egendefinerte implementeringer, selv om disse vanligvis vil bli beskrevet ved hjelp av regex-lignende syntaks som [a-z]+.

            
@property --base-color {
  syntax: <color>;
  inherits: false;
  initial-value: #333;
}

            

              
                Copy
              
            
          

inherits

inherits-deskriptoren bestemmer om den egendefinerte egenskapen arver verdien sin fra sitt overordnede element. Som standard arver ikke egendefinerte egenskaper. Denne oppførselen kan kontrolleres med en boolsk verdi: true eller false.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 16px;
}

            

              
                Copy
              
            
          

initial-value

initial-value-deskriptoren setter standardverdien for den egendefinerte egenskapen hvis den ikke er eksplisitt definert i CSS-en. Dette gir en reserveverdi når egenskapen ikke er spesifisert, lik oppførselen til standard CSS-egenskaper.

            
@property --border-width {
  syntax: <length>;
  inherits: false;
  initial-value: 1px;
}

            

              
                Copy
              
            
          

Praktiske eksempler

La oss se på noen praktiske eksempler for å illustrere hvordan man bruker @property effektivt.

Eksempel 1: Definere en fargeegenskap

I dette eksemplet definerer vi en egendefinert egenskap --primary-color for å representere en primærfarge i vårt designsystem. Vi spesifiserer at den kun aksepterer fargeverdier.

            
@property --primary-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

body {
  --primary-color: #007bff; /* Gyldig */
  color: var(--primary-color);
}

h1 {
  --primary-color: rgb(255, 0, 0); /* Gyldig */
  color: var(--primary-color);
}

            

              
                Copy
              
            
          

Eksempel 2: Definere en lengdeegenskap

Her definerer vi en egendefinert egenskap --spacing for å håndtere avstand mellom elementer, som aksepterer lengdeverdier. Dette eksemplet viser tydelig verdien av å sette en `initial-value` som en standard for hele nettstedet. Dette er spesielt nyttig når man bruker et designsystem der standardavstander er definert.

            
@property --spacing {
  syntax: <length>;
  inherits: false;
  initial-value: 1rem;
}

p {
  margin-bottom: var(--spacing);
}

            

              
                Copy
              
            
          

Eksempel 3: Definere en heltallsegenskap

Dette eksemplet definerer en egendefinert egenskap for antall kolonner i et rutenett-layout, og validerer at verdien er et heltall.

            
@property --grid-columns {
  syntax: <integer>;
  inherits: false;
  initial-value: 3;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

            

              
                Copy
              
            
          

Eksempel 4: Arv av egenskaper

Her definerer vi en egendefinert egenskap som *vil* arves. `font-size`-egenskapen satt til `1rem` på body vil påvirke alle dens barn med mindre den overstyres.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 1rem;
}

body {
  --font-size: 1rem;
  font-size: var(--font-size);
}

h2 {
  font-size: 1.25rem; /* Overstyrer arvet verdi */
}

            

              
                Copy
              
            
          

Eksempel 5: Kombinere typer

Ved å bruke '|'-operatoren kan vi kombinere typer. Her aksepterer vi enten en `length` eller en `percentage` for skyggeforskyvningen.

            
@property --shadow-offset {
  syntax: <length> | <percentage>;
  inherits: false;
  initial-value: 0;
}

.box {
  box-shadow: 0 var(--shadow-offset) var(--shadow-offset) gray;
}

            

              
                Copy
              
            
          

Beste praksis for bruk av @property

For å maksimere fordelene med @property, følg disse beste praksisene:

• Definer egenskaper på et sentralt sted: Grupper dine @property-definisjoner i en dedikert CSS-fil eller -seksjon, ofte øverst i hovedstilarket ditt eller i en designsystemfil. Dette fremmer organisering og gjør det enkelt å administrere dine egendefinerte egenskaper.
• Bruk beskrivende egenskapsnavn: Velg navn som tydelig indikerer formålet med hver egendefinert egenskap (f.eks. --primary-button-color, --header-font-size). Dette forbedrer lesbarheten og forståelsen.
• Gi omfattende dokumentasjon: Dokumenter dine egendefinerte egenskaper, inkludert deres syntaks, bruk og eventuelle begrensninger. Denne dokumentasjonen kan inkluderes i form av kommentarer ved siden av CSS-en din eller i en egen stilguide.
• Velg riktig syntaks: Velg nøye den passende syntax for hver egenskap. Å bruke riktig syntaks forhindrer feil og sikrer at de tildelte verdiene er gyldige.
• Vurder arv nøye: Bestem om en egenskap skal arve verdien sin fra sitt overordnede element. Dette avhenger av egenskapens natur og hvordan den skal brukes i designet ditt.
• Bruk initial-value strategisk: Sett en initial-value for alle egendefinerte egenskaper som krever en standardverdi. Dette gir en reserveverdi og sikrer at stilen blir brukt selv om egenskapen ikke er eksplisitt satt.
• Utnytt designsystemer: Integrer @property i ditt designsystem for å opprettholde konsistens og forbedre teamets utviklingsflyt. Ved å bruke det i kombinasjon med andre komponenter, bygger du mer robuste og modulære design, noe som ofte er målet når man lager komponenter for global bruk.
• Test grundig: Test dine egendefinerte egenskaper og deres oppførsel på tvers av forskjellige nettlesere og enheter for å sikre kompatibilitet og en konsistent brukeropplevelse. Testing på tvers av nettlesere er et kritisk skritt, da støtten for `property` ennå ikke er universelt implementert.

Nettleserkompatibilitet

Per 26. oktober 2023 varierer støtten for @property at-regelen mellom nettlesere. Chrome, Edge og Safari har god støtte, mens Firefox-støtten er i en begrenset tilstand. Konsulter alltid ressurser som Can I Use ([https://caniuse.com/mdn-css_at-rules_property](https://caniuse.com/mdn-css_at-rules_property)) for å holde deg oppdatert på nettleserkompatibilitet.

Viktige hensyn for nettleserkompatibilitet:

• Funksjonsdeteksjon: Bruk funksjonsdeteksjonsteknikker for å håndtere nettlesere som ikke støtter @property på en elegant måte. Du kan bruke en CSS-egenskapssjekk eller JavaScript-funksjonsdeteksjon for å anvende alternative stiler eller polyfills.
• Progressive Enhancement: Design nettstedet ditt med en grunnleggende styling som fungerer uten @property. Deretter kan du gradvis forbedre designet ved å legge til @property-støtte i kompatible nettlesere.
• Polyfills og reserveverdier: Vurder å bruke polyfills eller å tilby reserveverdier for nettlesere som ikke fullt ut støtter @property. Dette kan innebære å bruke vanlige CSS-variabler, eller forhåndsbehandling ved hjelp av SASS, LESS eller andre metoder.

Bruke CSS @property med JavaScript

En av de største fordelene med egendefinerte CSS-egenskaper er deres evne til å bli manipulert med JavaScript, noe som muliggjør dynamisk styling og forbedrede brukeropplevelser. @property forbedrer denne evnen, og gjør integrasjonen mellom CSS og JavaScript enda kraftigere og mer forutsigbar.

Slik kan du samhandle med egendefinerte egenskaper definert med @property i JavaScript:

1. Hente verdien til en egendefinert egenskap: Bruk getPropertyValue() for å hente verdien av en egendefinert egenskap.

               
   const element = document.querySelector('.my-element');
   const primaryColor = getComputedStyle(element).getPropertyValue('--primary-color');
   console.log(primaryColor); // f.eks. "#007bff"
   
               
   
                 
                   Copy
                 
               
             

2. Sette verdien til en egendefinert egenskap: Bruk setProperty() for å sette verdien av en egendefinert egenskap. På grunn av syntax-parameteren i `@property`-definisjonen, kan JavaScript-basert setting utløse validering av verdien i nettleseren.

               
   element.style.setProperty('--primary-color', 'green');
   
               
   
                 
                   Copy
                 
               
             

Eksempel: Dynamisk fargeendring med JavaScript

La oss illustrere hvordan man lager en dynamisk fargeendring ved hjelp av JavaScript og @property.

HTML:

            
<button class="my-button">Endre farge</button>

            

              
                Copy
              
            
          

CSS:

            
@property --button-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

.my-button {
  background-color: var(--button-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

            

              
                Copy
              
            
          

JavaScript:

            
const button = document.querySelector('.my-button');

button.addEventListener('click', () => {
  const newColor = 'red'; // Kan være basert på logikk/input
  button.style.setProperty('--button-color', newColor);
});

            

              
                Copy
              
            
          

I dette eksemplet endrer et klikk på knappen bakgrunnsfargen på knappen ved å modifisere den egendefinerte egenskapen --button-color med JavaScript.

Internasjonalisering (i18n) og CSS @property

CSS @property kan være et verdifullt verktøy for å lage webapplikasjoner som støtter forskjellige språk og lokaliseringer. Slik kan det brukes for i18n:

• Typografi: Definer egendefinerte egenskaper for skriftstørrelser, linjehøyder og skrifttyper, slik at du kan tilpasse tekstens utseende basert på det valgte språket.
• Layout: Bruk egenskaper for avstand, marger og polstring for å imøtekomme variasjoner i tekstretning (f.eks. venstre-til-høyre vs. høyre-til-venstre) og forskjellige tegnbredder.
• Farger: Bruk egenskaper for farger på UI-elementer, som knappefarger, tekstfarger og bakgrunnsfarger. Disse kan justeres for å samsvare med kulturelle preferanser eller designretningslinjer for spesifikke regioner.
• Tekstretning: Bruk en egendefinert egenskap for å kontrollere tekstretningen (f.eks. ltr, rtl) og endre layouten deretter.

Eksempel: Tilpasse skriftstørrelser basert på språk

I dette eksemplet demonstrerer vi hvordan man kan tilpasse skriftstørrelsen på overskrifter i henhold til det valgte språket. Tilnærmingen ville brukt et JavaScript-bibliotek for å bestemme riktig språk og sette egendefinerte egenskaper.

            
@property --heading-font-size {
  syntax: <length>;
  inherits: false;
  initial-value: 2rem;
}

h1 {
  font-size: var(--heading-font-size);
}

            

              
                Copy
              
            
          

Deretter, sett verdien dynamisk i JavaScript basert på det detekterte språket:

            
// Antar en global variabel eller funksjon for å hente brukerens språk
const userLanguage = getUserLanguage();
const heading = document.querySelector('h1');

if (userLanguage === 'ja') {
  heading.style.setProperty('--heading-font-size', '1.8rem'); // Juster for japansk
} else {
  heading.style.setProperty('--heading-font-size', '2rem'); // Standard
}

            

              
                Copy
              
            
          

Tilgjengelighetshensyn

Når du jobber med @property, er det viktig å ha tilgjengelighet i tankene:

• Fargekontrast: Sørg for tilstrekkelig fargekontrast mellom tekst og bakgrunn. Bruk egendefinerte egenskaper for farger for enkelt å kunne oppdatere designet for å oppfylle kontrastkrav.
• Tekststørrelse: La brukere kontrollere tekststørrelsen. Bruk relative enheter (rem, em) og egendefinerte egenskaper for å gjøre skalering av skrift enkelt.
• Fokusindikatorer: Tilpass fokusindikatorer for å gjøre dem tydelig synlige. Bruk egendefinerte egenskaper for å kontrollere fargen og stilen på fokusomrissene.
• ARIA-attributter: Sørg for at elementer har de riktige ARIA-attributtene når du bruker egendefinerte egenskaper for å kontrollere tilstander eller oppførsel.
• Tastaturnavigasjon: Verifiser at nettstedet ditt er lett navigerbart med et tastatur, spesielt hvis egendefinerte egenskaper brukes til å administrere interaktive elementer.

Hensyn og løsninger på tvers av nettlesere

Selv om @property er et kraftig verktøy, husk at nettleserstøtten ennå ikke er universelt implementert. Du bør benytte teknikker for kryssnettleserkompatibilitet for å redusere virkningen av manglende støtte.

• Progressive Enhancement: Design stilen din med grunnleggende CSS-variabler, og bruk deretter `@property` for ekstra funksjoner i støttede nettlesere.
• Funksjonsdeteksjon: Bruk funksjonsdeteksjonsmetoder for å avgjøre om en nettleser støtter @property før du bruker stiler med det. En enkel sjekk kan gjøres med JavaScript.
• CSS-reserveverdier: Gi reserveverdier for egenskaper som ikke støttes. Dette kan gjøres ved å sette egenskaper direkte, eller ved å bruke forskjellige variabler for støttede og ikke-støttede nettlesere.
• Preprosessorer: Bruk CSS-preprosessorer som Sass eller Less for å oversette strukturer på høyere nivå til standard CSS som kan brukes i nettlesere som ikke har full `@property`-støtte. Selv om dette introduserer et ekstra trinn, veier fordelene ofte opp for ulempene.

Eksempel på en CSS-reserveverdi:

            
.element {
  --base-color: #333; /* Standardverdi for nettlesere uten @property */
  color: var(--base-color);
}

@supports (color: --base-color) { /* Funksjonsdeteksjon for @property*/
  @property --base-color {
    syntax: <color>;
    inherits: false;
    initial-value: #333;
  }
  /* Legg til mer kompleks styling her som utnytter @property */
}

            

              
                Copy
              
            
          

Verktøy og biblioteker

Ulike verktøy og biblioteker kan hjelpe deg med å jobbe med @property:

• PostCSS-plugins: Plugins som `postcss-custom-properties` og `postcss-custom-properties-experimental` kan hjelpe med å transformere egendefinerte egenskaper og gi støtte for eldre nettlesere ved å konvertere `@property`-definisjoner til tilsvarende CSS-regler.
• Stylelint: Integrer stylelint og egendefinerte regler eller plugins for å validere bruken og strukturen av dine egendefinerte egenskaper.
• Designsystem-rammeverk: Integrer @property i populære designsystem-rammeverk som Ant Design, Material UI og Bootstrap for å sikre designkonsistens og gi utviklere en jevnere opplevelse.

Konklusjon

CSS @property er et kraftig tillegg til verktøykassen for webutvikling, og bringer struktur, validering og dynamiske evner til egendefinerte egenskaper. Ved å definere typen og oppførselen til dine CSS-variabler, kan du forbedre kodens vedlikehold, forbedre designkonsistensen og skape mer robuste og forutsigbare stilløsninger.

Ettersom nettleserstøtten forbedres, blir det stadig viktigere å innlemme @property i prosjektene dine. Ved å følge de beste praksisene som er skissert i denne guiden, kan du utnytte fordelene med denne nye funksjonen og skrive mer effektiv, vedlikeholdbar og skalerbar CSS. Omfavn @property, og transformer din arbeidsflyt for webutvikling!

Videre lesing

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1
• Can I Use: @property